import React from 'react';
import DataSet from '@antv/data-set';
import * as bizUtil from 'bizcharts/lib/core';
import Chart from 'bizcharts/lib/components/Chart';
import Axis from 'bizcharts/lib/components/Axis';
import Coord from 'bizcharts/lib/components/Coord';
import Interval from 'bizcharts/lib/components/TypedGeom/Interval';
import Label from 'bizcharts/lib/components/Label';
import Legend from 'bizcharts/lib/components/Legend';
import Tooltip from 'bizcharts/lib/components/Tooltip';

bizUtil.setTheme('default');

class BasePie extends React.Component {
  render() {
    const { DataView } = DataSet;
    const { data, fieldNames } = this.props;

    const dv = new DataView();
    dv.source(data).transform({
      type: 'percent',
      field: fieldNames.value,
      dimension: fieldNames.label,
      as: 'percent',
    });
    const cols = {
      percent: {
        formatter: val => {
          val = `${(val * 100).toFixed(2)}%`;
          return val;
        },
      },
    };

    function getXY(c, { index: idx = 0, field = 'percent', radius = 0.5 }) {
      const d = c.get('data');
      if (idx > d.length) return;
      const scales = c.get('scales');
      let sum = 0;
      for (let i = 0; i < idx + 1; i++) {
        let val = d[i][field];
        if (i === idx) {
          val = val / 2;
        }
        sum += val;
      }
      const pt = {
        y: scales[field].scale(sum),
        x: radius,
      };
      const coord = c.get('coord');
      let xy = coord.convert(pt);
      return xy;
    }

    const ChartProps = {
      onGetG2Instance: c => {
        const xy = getXY(c, { index: 0 });
        c.showTooltip(xy);
      },
    };
    return (
      <div>
        <Chart
          padding={[0, 0, 'auto', 0]}
          height={400}
          data={dv}
          forceFit
          {...ChartProps}
        >
          <Coord type="theta" radius={0.75} />
          <Axis name="percent" />
          <Legend position="bottom" />
          <Tooltip
            showTitle={false}
            itemTpl='<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
          />
          <Interval
            type="intervalStack"
            position="percent"
            color={fieldNames.label}
            tooltip={[
              `${fieldNames.label}*percent`,
              (item, percent) => {
                return {
                  name: item,
                  value: `${(percent * 100).toFixed(2)}%`,
                };
              },
            ]}
            style={{
              lineWidth: 1,
              stroke: '#fff',
            }}
          >
            <Label
              content="percent"
              offset={-45}
              textStyle={{
                rotate: 0,
                textAlign: 'center',
                shadowBlur: 2,
                shadowColor: 'rgba(0, 0, 0, .45)',
              }}
              formatter={(val, item) => {
                return `${(val * 100).toFixed(2)}%`;
              }}
            />
          </Interval>
        </Chart>
      </div>
    );
  }
}

export default BasePie;
